<template>
  <div class="take">
    <good-take-head v-model="filter"/>
    <good-take-sort v-model="sort"/>
    <good-take-body :data="take"/>
    <divide-page v-model="page"
                 :total="total"/>
  </div>
</template>

<script lang="ts"
        setup>
import {getTake} from '@/api/good'
import DividePage from '@/components/library/DividePage.vue'
import GoodTakeBody from '@/components/library/GoodTakeBody.vue'
import GoodTakeHead from '@/components/library/GoodTakeHead.vue'
import GoodTakeSort from '@/components/library/GoodTakeSort.vue'
import type {GoodDetail} from '@/types/good'
import type {Take} from '@/types/take'
import {computed, ref, watch} from 'vue'
import {onBeforeRouteLeave, useRoute} from 'vue-router'

let route = useRoute()

defineProps<{
  data: GoodDetail
}>()

let take = ref<Take[]>([])
let filter = ref<any>({})
let sort = ref<any>({})
let page = ref<number>(1)
let pageSize = 10
let total = ref<number>(1)
let takeSort = computed(() => ({
  page: page.value,
  pageSize,
  ...filter.value,
  ...sort.value
}))

let stopWatch = watch(() => [
  page.value,
  filter.value,
  sort.value
], () => initTake(), {
  immediate: true
})

onBeforeRouteLeave(() => stopWatch())

async function initTake(): Promise<void> {
  console.log(takeSort.value)
  let res = <any>await getTake(<string>route.params.id, takeSort.value)
  take.value = <Take[]>res.result?.items
  total.value = <number>res.result?.pages ?? 1
}
</script>

<style lang="less"
       scoped>
.take {
  background-color: #fff;
}
</style>